<template>
	<u-popup :show="visible" mode="bottom">
		<view class="header flex_between_center">
			<text class="btn" @click="handleCancle">取消</text>
			<text class="btn confirm" @click="handelConfirm">确定</text>
		</view>
		<view class="content flex">
			<view class="content-left">
				<view class="line" :class="{'actived':item.value===dateValue}" v-for="(item,index) in dateRangeList"
					:key="index" @click="dateChange(item)">
					{{item.label}}
				</view>
			</view>
			<view class="content-right">
				<view class="line" :class="{'actived':item.value===timeValue}" v-for="(item,index) in timeRangeList"
					:key="index" @click="timeChange(item)">{{item.label}}
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import commonJS from '@/common/libs/common.js'

	export default {
		data() {
			return {
				visible: false,
				loading: false,
				initTimestamp: Date.now(),
				dateRangeList: [],
				timeRangeList: [],

				dateValue: '',
				timeValue: '',
			}
		},
		methods: {
			// deliveryTime 配送时间段
			// eg：2021-07-01 09:20-09:40
			open(deliveryTime) {
				if (!deliveryTime) {
					this.initTimestamp = Date.now()
					this.dateRangeList = this.createDayRange(this.initTimestamp)
					this.dateChange(this.dateRangeList[0])
					this.timeValue = this.timeRangeList[0].value
				}
				this.visible = true
			},
			close() {
				this.visible = false
			},
			handleCancle() {
				this.close()
			},
			handelConfirm() {
				this.$emit('confirm', this.timeValue)
				this.close()
			},
			dateChange(item) {
				this.dateValue = item.value
				this.timeRangeList = item.list
			},
			timeChange(item) {
				this.timeValue = item.value
			},

			// 创建日期范围
			createDayRange(timestamp) {
				let result = new Array(5).fill(null).map((item, index) => {
					let tStartDay = new Date(timestamp)
					let tCopyStartDay = new Date(tStartDay.getTime())
					let tAimDay = new Date(tCopyStartDay.setDate(tCopyStartDay.getDate() + index))
					let tWeekStr = commonJS.formatWeekDate(tAimDay)
					let tDayStr = ''
					if (index === 0) {
						tDayStr = `今天`
					} else if (index === 1) {
						tDayStr = `明天`
					} else {
						let formatStr = tStartDay.getFullYear() === tAimDay.getFullYear() ? 'M月d日' : 'yyyy年M月d日'
						tDayStr = commonJS.formatTimestamp(tAimDay, formatStr)
					}

					return {
						label: `${tDayStr}(${tWeekStr})`,
						value: commonJS.formatTimestamp(tAimDay, 'yyyy-MM-dd'),
						list: this.createTimeRange(index === 0 ? tAimDay.getTime() : tAimDay.setHours(0, 0, 0, 0))
					}
				}).filter(item => item.list.length)
				return result
			},
			// 创建时间范围 
			createTimeRange(timestamp) {
				// 间隔一小时
				let interval = 1000 * 60 * 60
				let timeRanges = [
					['06:00', '18:00']
				]
				let curDateTimestamp = timestamp || Date.now()
				let curDate = commonJS.formatTimestamp(curDateTimestamp, 'yyyy/MM/dd')
				let rangeList = timeRanges
					.map(rangeItem => {
						let isAllTime = true
						let rangeStart = new Date(`${curDate} ${rangeItem[0]}`)
						let rangeEnd = new Date(`${curDate} ${rangeItem[1]}`)
						if (timestamp && rangeEnd < new Date(timestamp)) {
							return null
						}
						if (timestamp && rangeStart < new Date(timestamp)) {
							rangeStart = new Date(timestamp)
							isAllTime = false
						}
						let count = Math.ceil((rangeEnd - rangeStart) / interval)
						let tArr = new Array(count).fill(null).map((item, index) => {
							let tStart = new Date(rangeStart.getTime())
							tStart = new Date(tStart.setHours(tStart.getHours() + index))

							let tMStart = new Date(tStart.getTime())
							let mStart = commonJS.formatTimestamp(tMStart.getTime(), 'hh:mm')
							if (!isAllTime && index > 0) {
								mStart = commonJS.formatTimestamp(tMStart.setMinutes(0), 'hh:mm')
							}
							let mEnd = commonJS.formatTimestamp(tMStart.setHours(tMStart.getHours() + 1, 0, 0), 'hh:mm')

							return {
								label: !isAllTime && index === 0 ? '立刻送出' : `${mStart}-${mEnd}`,
								value: `${commonJS.formatTimestamp(curDateTimestamp, 'yyyy-MM-dd')} ${mStart}-${mEnd}`
							}
						})
						return tArr
					})
					.filter(item => item)
				let result = rangeList.flat()
				return result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		padding: 10rpx 30rpx;
		box-sizing: border-box;

		.btn {
			font-size: 28rpx;
			line-height: 1.5;
			cursor: pointer;

			&.confirm {
				color: #1A74FF;
			}

			&:hover {
				opacity: 0.8;
			}
		}
	}

	.content {
		height: 40vh;
		padding: 30rpx 0;

		.line {
			height: 96rpx;
			font-size: 28rpx;
			line-height: 96rpx;
		}

		.content-left {
			flex: 0 0 auto;
			width: 320rpx;
			height: 100%;
			text-align: center;
			background-color: #f7f8f9;
			overflow-y: auto;

			.actived {
				background-color: #fff;
			}
		}

		.content-right {
			width: 100%;
			height: 100%;
			padding: 0 30rpx;
			overflow-y: auto;

			.line {
				border-bottom: 1px solid #f7f8f9;
			}

			.actived {
				color: #1A74FF;
			}
		}
	}
</style>